<template>
    <view class="normal-login-container">
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view class="main-body-login">
            <view class="blur-overlay"></view>
            <view class="content-body" style="width: 100%;height: 100%">
                <view class="title-h3 font-style-normal">欢迎来到<br/>聊天助手</view>
                <view class="desp-content font-style-normal" style="text-align: center;margin-top: 100upx">
                    <view style="margin-bottom: 10upx">解锁只属于您的</view>
                    <view>聊天助手</view>
                </view>
                <view style="margin-top: 60upx">
                    <uni-forms ref="baseForm" :modelValue="loginForm" label-position="top" :rules="rules">
                        <uni-forms-item label="账号" required name="username">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">账号</view>
                            </template>
                            <uni-easyinput v-model="loginForm.username" placeholder="请输入账号"/>
                        </uni-forms-item>
                        <uni-forms-item label="密码" required name="password">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">密码</view>
                            </template>
                            <uni-easyinput v-model="loginForm.password" placeholder="请输入密码" type="password"/>
                        </uni-forms-item>
                        <uni-forms-item label="验证码" required name="code">
                            <template #label>
                                <view style="color: #fff;margin-bottom: 10upx">验证码</view>
                            </template>
                            <view style="display: flex;align-items: center">
                                <uni-easyinput v-model="loginForm.code" placeholder="请输入验证码" type="number"/>
                                <view class="button-get-code"
                                      @click="getCode">
                                    <view class="login-code">
                                        <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
                                    </view>
                                </view>
                            </view>
                        </uni-forms-item>
                    </uni-forms>
                </view>
                <view class="minor-font-size font-style-normal">
                    内容由 AI 生成，专业领域建议请结合实际验证
                </view>
                <view class="btn-yonghu font-style-normal" @click="handleLogin" style="letter-spacing: 4upx">
                    开始使用
                </view>

                <view class="text-center" v-if="register" style="margin-top: 30upx">
                    <text class="text-grey3" style="letter-spacing: 4upx">没有账号？</text>
                    <text @click="handleUserRegister" class="text-blue1" style="letter-spacing: 4upx">立即注册</text>
                </view>
            </view>

        </view>
    </view>
</template>

<script>
import {getCodeImg} from '@/api/login'
import {toast} from "@/utils/common";

let clearTime = null
export default {
    data() {
        return {
            codeUrl: "",
            captchaEnabled: true,
            // 用户注册开关
            register: true,
            globalConfig: getApp().globalData.config,
            loginForm: {
                username: "",
                password: "",
                code: "",
                uuid: ""
            },
            rules: {
                username: {
                    rules: [{
                        required: true,
                        errorMessage: '账号不能为空'
                    }]
                },
                password: {
                    rules: [{
                        required: true,
                        errorMessage: '密码不能为空'
                    }]
                },
                code: {
                    rules: [{
                        required: true,
                        errorMessage: '验证码不能为空'
                    }]
                }
            },
            isStat: false,
            codeTime: 60,
        }
    },
    onLoad() {
        this.getCode()
    },
    methods: {
        // 用户注册
        handleUserRegister() {
            this.$tab.redirectTo(`/pages/register`)
        },
        // 隐私协议
        handlePrivacy() {
            let site = this.globalConfig.appInfo.agreements[0]
            this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
        },
        // 用户协议
        handleUserAgrement() {
            let site = this.globalConfig.appInfo.agreements[1]
            this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
        },
        // 获取验证码
        getCode() {
            getCodeImg().then(res => {
                this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
                if (this.captchaEnabled) {
                    this.codeUrl = 'data:image/gif;base64,' + res.img
                    this.loginForm.uuid = res.uuid
                }
            })
        },
        // 登录方法
        handleLogin() {
            this.$refs.baseForm.validate().then(bol => {
                if (bol) {
                    this.$modal.loading("登录中，请耐心等待...")
                    this.pwdLogin()
                }
            })

        },
        // 密码登录
        pwdLogin() {
            this.$store.dispatch('Login', this.loginForm).then(() => {
                this.$modal.closeLoading()
                this.loginSuccess()
            }).catch(() => {
                if (this.captchaEnabled) {
                    this.getCode()
                }
            })
        },
        // 登录成功后，处理函数
        loginSuccess(result) {
            // 设置用户信息
            this.$store.dispatch('GetInfo').then(res => {
                this.$tab.reLaunch('/pages/index')
            })
        },
    }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;
  height: 100vh;
  background: rgb(63, 118, 252);
  overflow-y: auto;

  .status_bar {
    height: var(--status-bar-height);
    width: 100%;
  }

  .main-body-login {
    width: 100%;
    height: 100%;
    background: url("@/static/images/bg-login.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;

    .blur-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.1); /* 背景透明度为 50% */
    }

    .content-body {
      position: relative;
      z-index: 1;
      padding: 40upx 40upx 0 40upx;
      box-sizing: border-box;
      overflow-y: auto;

      .title-h3 {
        color: #fff;
        font-weight: 800;
        font-size: 64upx;
        letter-spacing: 10upx;
      }

      .desp-content {
        font-weight: 500;
        font-size: 40upx;
        color: #ECECEC;
        letter-spacing: 10upx;
      }

      .minor-font-size {
        //margin-top: 476upx;
        text-align: center;
        font-weight: 500;
        font-size: 24upx;
        color: #EFEFEF;
      }

      .btn-yonghu {
        margin-top: 40upx;
        width: 100%;
        height: 116upx;
        text-align: center;
        line-height: 116upx;
        background: url("@/static/images/btn-login.png") no-repeat;
        background-size: 100%;
        color: #4376FC;
        font-size: 32upx;
        font-weight: 800;
      }
    }

  }
}

.button-get-code {
  height: 70upx;
  line-height: 70upx;
  text-align: center;
  color: #4376FC;
  font-size: 24upx;
  font-weight: 800;
  padding: 0 20upx;
  border-radius: 10upx;

  .login-code {
    height: 70upx;

    .login-code-img {
      height: 70upx;
      width: 200rpx;
    }
  }
}

</style>
